import { defineComponent, reactive, ref, withModifiers } from "vue";
import { CirclePlus, Delete, EditPen, Search } from "@element-plus/icons-vue";
import { ElMessage, ElMessageBox } from "element-plus";
import {
  DeleteTongYongMingDel,
  GetTongYongMingSel,
  PostTongYongMingAdd,
  PutTongYongMingUpdate
} from "@/api/modules/zhenDuanJieGuo";
import { useZhenDuanJieGuo } from "@/stores/modules/zhenDuanJieGuo";
import { useHandleData } from "@/hooks/useHandleData";
interface tongYongMing {
  TongYongMingID: string;
  TongYongMingMingCheng: string;
  tid: string;
}
export default defineComponent({
  name: "TongYongMing",
  setup() {
    const searchForm = reactive({
      searchFormTongYong: ""
    });
    const tableData = ref<any>([]);
    const columns: any = [
      {
        label: "序号",
        type: "index",
        width: "70"
      },
      {
        label: "通用名",
        prop: "TongYongMingMingCheng"
      },
      {
        label: "操作",
        fixed: "right",
        width: "100",
        // slot: "caoZuo"
        cellRenderer: (scope: any) => (
          <>
            <el-tooltip className="box-item" effect="dark" content="编辑" placement="top">
              <el-button type="primary" link icon={EditPen} onClick={() => onOpenEditRole("edit", scope.row)}></el-button>
            </el-tooltip>
            <el-tooltip className="box-item" effect="dark" content="删除" placement="top">
              <el-button type="primary" link icon={Delete} onClick={() => deleteAccount(scope.row)}></el-button>
            </el-tooltip>
          </>
        )
      }
    ];
    const handelMessage = (type: string, dataLs: any) => {
      ElMessageBox.prompt("", dataLs.title, {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        inputPlaceholder: "请输入新的通用名称",
        inputValue: dataLs.inputValue,
        inputPattern: /^.+$/,
        inputErrorMessage: "不可以为空"
      }).then(({ value }) => {
        if (type === "add") {
          let obj = {
            TongYongMingMingCheng: value
          };
          PostTongYongMingAdd(obj).then((res: any) => {
            if (res.Success === 0) {
              searchFormClick();
              ElMessage({
                type: "success",
                message: `${dataLs.title}成功`
              });
            }
          });
        } else {
          let obj = {
            TongYongMingMingCheng: value,
            TongYongMingID: dataLs.row.TongYongMingID
          };
          PutTongYongMingUpdate(obj).then((res: any) => {
            if (res.Success === 0) {
              searchFormClick();
              ElMessage({
                type: "success",
                message: `${dataLs.title}成功`
              });
            }
          });
        }
      });
    };

    const ElMessageBoxChange = (type: string, row?: tongYongMing) => {
      if (type === "add") {
        let obj = {
          title: "新增通用名称",
          inputValue: ""
        };
        handelMessage(type, obj);
      } else {
        let obj = {
          title: "修改通用名称",
          inputValue: row?.TongYongMingMingCheng,
          row
        };
        handelMessage(type, obj);
      }
    };
    const searchFormClick = () => {
      let obj = {
        strTongYongMing: searchForm.searchFormTongYong
      };
      GetTongYongMingSel(obj).then((res: any) => {
        if (res.Success === 0) {
          console.log(res.Data);
          tableData.value = res.Data;
        }
      });
    };
    // 新增
    const onOpenAddRole = type => {
      ElMessageBoxChange(type);
    };
    // 编辑
    const onOpenEditRole = (type: string, row: tongYongMing) => {
      ElMessageBoxChange(type, row);
    };
    // 删除
    const deleteAccount = (row: Partial<tongYongMing> = {}) => {
      let obj = {
        TongYongMingID: row.TongYongMingID
      };
      useHandleData(DeleteTongYongMingDel, obj, `删除【${row.TongYongMingMingCheng}】`).then(() => {
        searchFormClick();
      });
    };
    // 每一行的点击事件
    const tableDataClick = (data: tongYongMing) => {
      console.log(data, "每一行的点击");
      useZhenDuanJieGuo().setTongYongMingIDChange(data.TongYongMingID);
      useZhenDuanJieGuo().getTongYongMingJiBingSel();
    };
    let tableLiving = () => {
      //           maxHeight={300}
      //           adaptive={true}
      return (
        <pure-table
          ref="tableRef"
          row-key={row => row.tid}
          border={true}
          maxHeight={250}
          adaptive={true}
          align-whole="center"
          show-overflow-tooltip={true}
          data={tableData.value}
          columns={columns}
          className="pure-table"
          highlight-current-row={true}
          onRowClick={(data: any) => tableDataClick(data)}
        ></pure-table>
      );
    };
    const searchFormLiving = () => {
      return (
        <el-form model={searchForm} ref="searchForm">
          <el-row>
            <el-col span={16}>
              <el-form-item label="通用名:" prop="searchFormTongYong">
                <el-input
                  v-model={searchForm.searchFormTongYong}
                  placeholder="通用名"
                  onKeyupEnter={withModifiers(() => searchFormClick(), ["enter"])}
                  clearable
                ></el-input>
                {/*回车事件暂时不好用*/}
                {/*                  onKeyupEnter={() => searchFormClick()}*/}
                {/*  @keydown.enter*/}
              </el-form-item>
            </el-col>
            <el-col span={8}>
              <el-button type="primary" size="default" style={{ marginLeft: "10px" }} onClick={() => searchFormClick()}>
                <el-icon>
                  <Search />
                </el-icon>
                搜索
              </el-button>
            </el-col>
          </el-row>
        </el-form>
      );
    };
    return () => {
      return (
        <div className="TongYongMing-main">
          <div className="TongYongMing-add back bg-white px-20 py-10">
            <el-button size="default" icon={CirclePlus} onClick={() => onOpenAddRole("add")} type="primary">
              新增通用名
            </el-button>
          </div>
          <div className="TongYongMing-table  bg-white mt-2">
            <div className="TongYongMing-search px-20 py-10" style={{ marginBottom: "10px" }}>
              {searchFormLiving()}
            </div>
            <div className="TongYongMing-table px-20 py-10">{tableLiving()}</div>
          </div>
        </div>
      );
    };
  }
});
